<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/admin.css" />
	<script type='text/javascript' src='__PUBLIC__/js/jquery.min.js'></script>
	<script type='text/javascript' src='__PUBLIC__/layer/layer.js'></script>
	<script type='text/javascript' src='__PUBLIC__/admin/js/common.js'></script>
	<script type='text/javascript' src='__PUBLIC__/js/socket.js'></script>
    <title>后台管理</title>
    <style>
    .project_div{min-width:50%;width:auto;min-height:39px;height:auto;overflow:hidden;border:1px solid #ccc;border-radius:5px;margin-top:15px;padding:0 0 5px 10px;}
    .project_span{display:block;float:left;font-size:14px;color:#333;background:#e7e7e7;padding:5px 10px;margin:5px 10px 0 0;border-radius:5px;cursor:pointer;}
    .dele_span{color:#333;cursor:pointer;}
    .pstyle{position:relative;float:left;margin:15px 15px 0 0;}
    .pstyle img{display:block;width:110px;height:110px;}
    .pstyle span{position:absolute;right:0;top:0;display:block;width:20px;height:20px;background:#999;color:#fff;text-align:center;line-height:20px;cursor:pointer;border-radius:50%;}
    .con5082{width:92%;height: auto;overflow-x: hidden;overflow-y:auto;margin:15px 3%;padding:0 1%;}
    .con5082_li1,.con5082_li2{width:100%;height: auto;overflow: hidden;margin-bottom: 15px;}
    .con5082_li1 .li_lft{width:10%;height: auto;overflow: hidden;float: left;text-align: center;}
    .con5082_li1 .li_lft p{line-height:20px;color:#e88c81;}
    .con5082_li1 .li_rit{width: 77%;height: auto;overflow: hidden;font-style: 16px;color:#333;line-height: 1.5em;border-radius: 5px;border:1px solid #DBDBDB;float:left;padding:10px 1%;margin-left:10px;margin-top:15px;}
    .con5082_li1 .li_lft img{display:block;width:65px;height: 65px;border-radius:50%;margin:0 auto;}
    .con5082_li2 .li_rit img{display:block;width:65px;height: 65px;border-radius:50%;margin:0 auto;}
    .con5082_li2 .li_rit p{line-height:20px;color:#e88c81;}
    .con5082_li2 .li_lft{width: 77%;height: auto;overflow: hidden;font-style: 16px;color:#333;line-height: 1.5em;border-radius: 5px;border:1px solid #DBDBDB;float:right;padding:10px 1%;margin-right:10px;margin-top:15px;}
    .con5082_li2 .li_rit{width:10%;height: auto;overflow: hidden;float: right;text-align: center;}
    .con5082_btm{width: 98%;height: auto;overflow: hidden;padding:15px 1%;background: #fff;}
    .con5082_btm textarea{width:99%;height: auto;overflow: hidden;padding:15px;border:1px solid #DBDBDB;border-radius: 5px;resize:none;}
    .con5082_btm input[type=button]{width: 150px;height: 39px;float: right;color:#fff;background: #8CC382;border:none;margin:15px 2% 15px 0;font-size:16px;border-radius: 5px;}
    </style>
</head>
<body>
<div class="main-container clearfix"><div class="main-content"><div class="inner"><div class="mall-manage">
    <div class="comm-list">
        <form id="goodsForm">
            <input type="hidden" name="num[id]" value="<{$goodsData.id}>"/>
            <div class="comm-top">
                <h4>与张三进行对话</h4>
                <div style="height:0px;border-top:1px dashed #DBDBDB;margin:0 10px;"></div>
            </div>
            <div class="shop_sort_box">
                <div class="con5082" id="chatWrap" style="height:460px;">
                    <foreach name="list" item="vo" >
                        <if condition="$vo['sender'] eq $sender ">
                            <div class="con5082_li2"><div class="li_rit">
                                <img src="__PUBLIC__/images/PersonalHeadImg.png" title="系统医生"/>
                                <p>系统医生</p></div>
                                <div class="li_lft"><{$vo.content}></div>
                            </div>
                            <else />
                            <div class="con5082_li1"><div class="li_lft">
                                <img src="<{$row.pic}>" title="<{$row.name}>"/>
                                <p><{$row.name}></p></div>
                                <div class="li_rit"><{$vo.content}></div>
                            </div>
                        </if>
                    </foreach>
                </div>
                <div class="con5082_btm">
                    <textarea name="content" placeholder="请输入回复内容"></textarea>
                    <input type="button" value="返回" style="background:#acaeab;" onclick="history.go(-1)"/>
                    <input type="button" value="回复" style="background:#009997;" id="saveBtn" onclick="say(this)"/>
                </div>
            </div>
        </form>
    </div>
</div></div></div></div>
<script type="text/javascript">
var pageNum=1;
var page_ajax=true;

function send(text) {
    Server.send('message', JSON.stringify({sender: 'system', receiver: '<{:I("get.phone")}>', text: text}));
}

$(function () {
    Server = new FancyWebSocket('ws://' + window.location.host + ':8000');
    Server.bind('open', function () {
        send();
    });

    Server.bind('message', function (data) {
        $("#chatWrap").append('<div class="con5082_li1"><div class="li_lft"><img src="<{$vo.pic}>" title="<{$vo.name}>"/><p><{$vo.name}></p></div><div class="li_rit">'+data+'</div></div>');
        document.getElementById('chatWrap').scrollTop = document.getElementById('chatWrap').scrollHeight;
    });
    Server.connect();
});

$(function(){
	$("textarea[name=content]").focus();
    document.getElementById('chatWrap').scrollTop = document.getElementById('chatWrap').scrollHeight;
    //查看历史记录
    $('#chatWrap').scroll(function(){
        if($('#chatWrap').scrollTop() < 5){
            if(page_ajax){
				page_ajax=false;
				pageNum++;
				$.post("<{:U('getMore')}>",{p:pageNum,receiver:'<{:I("get.phone")}>'},function(res){
					if(res){
						if(res=='err'){
							
						}else{
							var goodsStr='';
							$.each(res,function(i,item){
                                if(item.sender == '<{$sender}>'){
                                    goodsStr+='<div class="con5082_li2"><div class="li_rit"><img src="./public/images/PersonalHeadImg.png" title="系统医生"/><p>系统医生</p></div><div class="li_lft">'+item.content+'</div></div>';
                                }else{
                                    goodsStr+='<div class="con5082_li1"><div class="li_lft"><img src="<{$row.pic}>" title="<{$row.name}>"/><p><{$row.name}></p></div><div class="li_rit">'+item.content+'</div></div>';
                                }
							})
							$('#chatWrap').prepend(goodsStr);
						}
					}
					page_ajax=true;
				},'json');
			}
        }
    })
});

function say(obj){
	var content = $.trim($('textarea[name=content]').val());
	var tomanid = "<{:I('get.id')}>";
	if(content.length>200){
		note_info('发言内容不得超过200个字符',obj,'warn');return;
	}else if(content==''){
		note_info('您还没有输入任何内容',obj,'warn');return;
	}
    
    var chatStr = '<div class="con5082_li2"><div class="li_rit"><img src="__PUBLIC__/images/PersonalHeadImg.png" title="系统医生"/><p>系统医生</p></div><div class="li_lft">'+content+'</div></div>';
    $('#chatWrap').append(chatStr);
    document.getElementById('chatWrap').scrollTop = document.getElementById('chatWrap').scrollHeight;
    send(content);
    $('textarea[name=content]').val('');
}

</script>